<template>
	<div class="share-page">
		<el-breadcrumb separator=">">
			<el-breadcrumb-item>设备管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/replenish' }">补货模版</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/replenish_edit' }">编辑补货模版</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="edit-page">
			<div class="head">
				<div class="head-title">
					<span>*</span>
					模版名称
				</div>
				<el-input v-model="name" style="width: 260px" placeholder="请输入补货模版名称" />
				<div class="checkbox">
					<el-checkbox-group v-model="checkList">
						<el-checkbox label="竖屏设备" value="release" />
						<el-checkbox label="横屏设备" value="rows" />
						<el-checkbox label="无屏设备" value="none" />
					</el-checkbox-group>
				</div>
			</div>
			<div class="edit-content">
				<div class="left">
					<div class="left-title">
						全局温度设置
					</div>
					<div class="top-tabs">
						<div v-for="item in tabsList" :key="item.index"
							:class="activeIndex === item.index ? 'activity-item' : ''" class="tabs-item"
							@click="cutTabs(item)">
							<img v-if="activeIndex === item.index" :src="item.img" alt="" />
							<img v-else :src="item.activity_img" alt="" />
							<span>
								{{item.name}}
							</span>
						</div>
					</div>
					<div class="storey">
						<div class="storey-item" v-for="(item, index) in goodslist" :key="index">
							<div class="storey-left">
								<div>第{{index + 1}}层</div>
								<el-dropdown>
									<div class="storey-num">
										<div>5个</div>
										<CaretBottom style="width: 1em; height: 1em; margin-right: 8px" />
									</div>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item>1</el-dropdown-item>
											<el-dropdown-item>2</el-dropdown-item>
											<el-dropdown-item>3</el-dropdown-item>
											<el-dropdown-item>4</el-dropdown-item>
											<el-dropdown-item>5</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</div>
							<div class="storey-goods">
								<div class="storey-head"></div>
								<div class="goods-box">
									<div class="goods" @mouseover="mouseover(index, x)" @mouseout="mouseout(index, x)"
										v-for="(i, x) in item.goods" :key="x">
										<div
											:style="i.isshow ? 'opacity: 1;cursor: pointer;' : 'opacity: 0;cursor: pointer;'">
											<el-icon>
												<Plus color="#999" />
											</el-icon>
										</div>
										<img class="goods-img" src="/src/assets/home/commodity2.png" alt="" />
										<div
											:style="i.isshow ? 'opacity: 1;cursor: pointer;' : 'opacity: 0;cursor: pointer;'">
											<el-icon>
												<Delete color="#999" />
											</el-icon>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="right">
					<div class="right-head">
						<el-input size="small" v-model="goods_name" style="width: 200px" placeholder="请输入商品名称或条形码" />
						<div class="right-btn">
							<el-button size="small" round :icon="Search" color="#0071bb">查询</el-button>
						</div>
					</div>
					<el-scrollbar style="height: 70vh;">
						<div class="right-goods">
							<div class="goods-item" v-for="(item,index) in 30" :key="index">
								<img class="goods-img" src="/src/assets/home/commodity2.png" alt="" />
								<div class="goods-title">
									怡宝菊花茶瓶装450ml
								</div>
								<div class="goods-num">
									5688746354
								</div>
							</div>
						</div>
					</el-scrollbar>
				</div>
			</div>
			<div class="bottom-btn">
				<el-button size="small" round color="#0071bb">确定</el-button>
				<el-button size="small" round>取消</el-button>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { CaretBottom, Plus, Delete, Search } from '@element-plus/icons-vue';

	interface TabsItem {
		name : string;
		index : string;
		img : string;
		activity_img : string;
	}

	interface GoodsItem {
		isshow : boolean;
	}

	interface StoreyItem {
		goods : GoodsItem[];
	}
	const name = ref<string>('');
	const goods_name = ref<string>('');
	const checkList = ref<string[]>([]);
	const activeIndex = ref<string>('1');

	const tabsList : TabsItem[] = [
		{ name: '制冷', index: '1', img: '/src/assets/device/cold1.png', activity_img: '/src/assets/device/cold2.png' },
		{ name: '常温', index: '2', img: '/src/assets/device/ordinary1.png', activity_img: '/src/assets/device/ordinary2.png' },
		{ name: '制热', index: '3', img: '/src/assets/device/heat1.png', activity_img: '/src/assets/device/heat2.png' }
	];

	const goodslist = ref<StoreyItem[]>([
		{
			goods: [
				{ isshow: false },
				{ isshow: false },
				{ isshow: false },
				{ isshow: false },
				{ isshow: false }
			]
		},
		{
			goods: [
				{ isshow: false },
				{ isshow: false },
				{ isshow: false },
				{ isshow: false },
				{ isshow: false }
			]
		},
		{
			goods: [
				{ isshow: false },
				{ isshow: false },
				{ isshow: false },
				{ isshow: false },
				{ isshow: false }
			]
		},
		{
			goods: [
				{ isshow: false },
				{ isshow: false },
				{ isshow: false },
				{ isshow: false },
				{ isshow: false }
			]
		},
		{
			goods: [
				{ isshow: false },
				{ isshow: false },
				{ isshow: false },
				{ isshow: false },
				{ isshow: false }
			]
		},
	]);

	const mouseover = (index : number, x : number) => {
		goodslist.value[index].goods[x].isshow = true;
	};

	const mouseout = (index : number, x : number) => {
		goodslist.value[index].goods[x].isshow = false;
	};

	const cutTabs = (tabItem : TabsItem) => {
		activeIndex.value = tabItem.index;
	};
</script>

<style lang="scss" scoped>
	.edit-page {
		padding: 20px;
		background-color: #ffffff;
		margin-top: 20px;

		.head {
			display: flex;
			align-items: center;
			padding: 0 20px;

			.head-title {
				font-size: 14px;
				font-weight: bold;
				margin-right: 10px;

				span {
					color: #ff1d1d;
				}
			}

			.checkbox {
				margin-left: 30px;
			}
		}

		.bottom-btn {
			display: flex;
			justify-content: center;
			margin-top: 20px;
		}

		.edit-content {
			display: flex;
			justify-content: space-between;
			margin-top: 10px;

			.left {
				width: 48.5%;
				padding: 10px 15px;
				background-color: #f1f1f1;

				.left-title {
					font-size: 14px;
				}

				.top-tabs {
					text-align: center;
					display: flex;
					font-weight: bold;
					font-size: 14px;
					margin-top: 15px;

					.tabs-item {
						width: 100px;
						padding: 5px;
						background-color: #fff;
						border: 1px solid #d2d2d2;
						border-radius: 20px;
						margin-right: 15px;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					img {
						width: 20px;
						height: 20px;
						margin-right: 5px;
					}

					.activity-item {
						background-color: #0071bb;
						border: 1px solid #0071bb;
						color: #fff;
					}

					.tabs-item:hover {
						cursor: pointer;
					}
				}

				.storey {
					width: 100%;
					padding: 10px;
					margin-top: 20px;

					.storey-item {
						width: 100%;
						display: flex;
						align-items: center;

						.storey-left {
							width: 20%;
							text-align: center;
							font-size: 14px;

							.storey-num {
								display: flex;
								align-items: center;
								justify-content: center;
								padding-top: 5px;
							}
						}

						.storey-goods {
							width: 100%;

							.storey-head {
								width: 100%;
								height: 30px;
								background-color: #cbcbcb;
							}

							.goods-box {
								width: 100%;
								display: flex;
								justify-content: space-around;
								background-color: #fff;
								padding: 15px 0;

								.goods-img {
									width: 30px;
									height: 50px;
								}

								.goods {
									display: flex;
									align-items: center;
								}
							}

						}

					}
				}

			}

			.right {
				width: 48.5%;
				background-color: #f1f1f1;

				.right-head {
					display: flex;
					padding: 10px 30px;
					background-color: #23537b;

					.right-btn {
						margin-left: 10px;
					}
				}

				.right-goods {
					padding: 25px 25px 15px 25px;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.goods-item {
						width: 17%;
						text-align: center;
						padding: 20px 15px;
						background-color: #fff;
						border: 1px solid #d6d6d6;
						border-radius: 10px;
						font-size: 12px;
						color: #999;
						margin-bottom: 10px;

						img {
							width: 35px;
							height: 65px;
						}

						.goods-title {
							margin-top: 15px;
							width: 110px;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.goods-num {
							margin-top: 5px;
						}
					}

				}
			}
		}
	}
</style>